<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Lei Shi">
    <meta http-equiv="Cache-Control" content="o-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">
    <title th:text="${course.courseName}"></title>

    <script type="text/javascript" th:src="@{/static/lib/jquery/1.9.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/layer/2.4/layer.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/laypage/1.2/laypage.js}"></script>
    <link rel="stylesheet" th:href="@{/static/lib/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/styles-2016121272249.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/lib/laypage/1.2/skin/laypage.css}">

    <style>
        @font-face {
            font-family: "lantingxihei";
            src: url("static/font/FZLTCXHJW.TTF");
        }

        form {
            display: none;
        }

        #courseList {
            display: none;
        }

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }

        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size: 14px;
        }

        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }

        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }

        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }

        /* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top header">
    <div class="container">
        <div class="collapse navbar-collapse" id="header-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown active">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        课程
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="active" href="">全部课程</a></li>
                        <li><a class="" href="">即将上线</a></li>
                    </ul>
                </li>
                <!--<li class="">
                    <a href="">路径</a>
                </li>
                <li class="">
                    <a href="">讨论区</a>
                </li>
                <li class=" new-nav logo-1111">
                    <a href="">会员</a>
                </li>-->
            </ul>
            <div class="navbar-right btns">
                <a class="btn btn-default navbar-btn sign-in" data-sign="signin" href="#sign-modal" data-toggle="modal">登录</a>
                <a class="btn btn-default navbar-btn sign-up" data-sign="signup" href="#sign-modal" data-toggle="modal">注册</a>
            </div>
        </div>
    </div>
</nav>
<div class="container layout layout-margin-top">
    <!--<ol class="breadcrumb">
        <li><a href="javascript:;">全部课程</a></li>
        <li>
            <a href="javascript:;">Linux</a>
        </li>
        <li class="active">
            <a href="javascript:;">
                Linux 基础入门（新版）
            </a>
        </li>
    </ol>-->
    <div class="row">
        <div class="col-md-9 layout-body">
            <div class="side-image side-image-mobile">
                <!--<img src="static/picture/ncn111.jpg">-->
            </div>
            <div class="content course-infobox">
                <div class="clearfix course-infobox-header">
                    <h4 class="pull-left course-infobox-title">
                        <span th:text="${course.courseName}"></span>
                    </h4>
                </div>
                <div class="clearfix course-infobox-body">
                    <div class="course-infobox-content">
                        <strong>课程简介:</strong><span th:text="${course.courseIntroduction}"></span>
                    </div>
                    <div class="pull-right course-infobox-price">
                        价格：<span th:text="${course.coursePrice}"></span>元
                        <button style="background-color: #428BCA" class="btn btn-primary" onclick="payBtn()">
                           <!-- <a  href="javascript:;" data-toggle="modal" data-sign="signin"
                               data-next="/courses/1">点击购买</a>-->
                            点击购买
                        </button>
<!--                        <button style="background-color: #428BCA" class="btn btn-primary" >-->
<!--                            &lt;!&ndash; <a  href="javascript:;" data-toggle="modal" data-sign="signin"-->
<!--                                data-next="/courses/1">点击购买</a>&ndash;&gt;-->
<!--                            收藏-->
<!--                        </button>-->
                        <button type="button" class="btn btn-default" id="btn_collect" style="background-color: #428BCA">
                            <span class="glyphicon glyphicon-star-empty" id="btn_collect_icon" aria-hidden="true"></span>收藏
<!--                            <a id="mir" class="btn btn-danger" href="javascript:void(0)" style="background-color:#428BCA;">-->
<!--                                <span id="sctxt">收藏</span><i class="iconfont icon-favorite"></i>-->
<!--                            </a>-->
                        </button>

                    </div>
                </div>
                <!--<div class="clearfix course-infobox-footer">
                    <div class="pull-right course-infobox-learned">85243 人学过</div>
                </div>-->
            </div>
            <div class="content">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a onclick="queryMulu()" aria-controls="labs" role="tab"
                           data-toggle="tab">课程列表</a>
                    </li>
                    <li role="presentation">
                        <a onclick="toComment()" class="stat-event" aria-controls="comments" role="tab"
                           data-stat="course_comment" data-toggle="tab">课程评论(<span th:text="${commentCount}"></span>)
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <form>
                        <div>好评率：<span th:text="${course.courseFavorateRate}"></span></div>
                        请选择：<input type="radio" name="commentStatus" value="0" checked>好评
                        <input type="radio" name="commentStatus" value="1">差评<br>
                        <input type="text" name="commentContent" placeholder="请输入评价内容" id="commentMsg">
                        <input type="hidden" th:value="${course.courseId}" name="courseId" >
                        <!--<input type="hidden" th:value="${session.user.userId}" name="userId">-->
                        <input type="button" value="提交" onclick="addComm()">
                        <hr>
                    </form>
                    <div role="tabpanel" class="tab-pane active" id="catalo">
                        <div class="lab-item" th:each="lession,catalogStat : ${catalog}">
                            <!--高申，2019-12-18 点击播放课程的时候加入判断，没有购买提示不能播放信息-->
                            <div class="lab-item-index" th:onclick="'javascript:lookVideo('+${lession.lessionId}+');'">第
                                <span th:text="${catalogStat.index+1}"></span> 节
                                &nbsp;&nbsp;<span class="cat" th:text="${lession.lessionTitle}"></span>
                                <!--<span th:text="${lession.lessionId}"></span>-->
                            </div>
                            <div class="pull-right lab-item-ctrl">
                                <!--<a class="btn btn-default" href="#sign-modal" data-toggle="modal" data-sign="signin"
                                   data-next="/courses/1">查看文档</a>-->
                            </div>
                        </div>
                    </div>
                    <div id="pagenav">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 layout-side">
            <div class="side-image side-image-pc">
                <strong>课程封面：</strong><img th:src="${path}">
            </div>
            <div class="sidebox mooc-teacher">
                <div class="sidebox-header mooc-header">
                    <h4 class="sidebox-title">课程教师</h4>
                </div>
                <div class="sidebox-body mooc-content">
                    <div class="mooc-info">
                        <div class="name"><strong th:text="${course.teacher.teacherName}"></strong></div>
                        <div class="courses">共发布过<strong th:text="${courseCount}"></strong>门课程</div>
                    </div>
                    <div class="mooc-extra-info">
                        <div class="word long-paragraph">
                            <strong>自我介绍：</strong>
                            <span th:text="${course.teacher.teacherIntroduction}"></span>
                        </div>
                    </div>
                </div>
                <div class="sidebox-footer mooc-footer">
                    <a onclick="xianshi()" target="_blank">查看老师的所有课程 >></a>
                    <hr>
                    <div id="courseList">
                        <div th:each="course,courseStat : ${courseList}">
                            <p><a th:onclick="'javascript:toCourse('+${course.courseId}+');'" th:text="${course.courseName}"></a><br></p>
                        </div>
                        <a  onclick="yincang()" target="_blank">收起<<</a>
                    </div>
                </div>
            </div>
            <div class="side-image">
            </div>
        </div>
    </div>
</div>
<div id="base-data" data-flash="false" data-is-login="false" data-is-jwt="true"
     data-socket-url="wss://comet.shiyanlou.com" data-msg-user="" data-msg-system=""></div>

<script th:inline="javascript">

    /*取得courseId*/
    var courseId = [[${course.courseId}]];
    var coursrPrice= [[${course.coursePrice}]];


    /*点击购买*/
    function payBtn() {
        //gs判断该用户的订单表中是否存在该课程
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/order/check',
            data: {
                courseId: courseId,
            },
            success: function (result) {
                if(result.result==1){//gs用户已购买该课程
                    layer.open({
                        type: 1,
                        title: '温馨提示',
                        fix: false,
                        shade: 0.05,//调节背景明暗度
                        offset: "35%",
                        maxmin: true,
                        content: "<div style='padding: 25px 50px 15px 50px;font-size: 16px' >您已经购买过该课程了！</div>",
                        btn:['进入学习'],
                        end: function () {

                        }
                    });
                    layer.full(index);
                }
                else{//gs购买提示框
                    layer.confirm("您尚未购买该课程，点击确认购买？",
                        {icon:4,title:'温馨提示',shade: 0.05,offset: "35%"},
                        //第一个选项对应内容
                        function (index) {
                            flag=true;
                            //调用订单页面，支付跳转
                            payWindow(flag);
                            layer.close(index);
                        },
                        //第二个选项对应内容
                        function () {flag=false;}
                    )
                }
            }
        })
    }

    /*查看视频*/
    function lookVideo(obj) {

        //gs判断该用户的订单表中是否存在该课程
        $.ajax({
            type: "POST",
            url:'/order/check',//请求页面
            data: {
                courseId: courseId,
            },
            dataType: "json",
            success: function (result) {
                if (result.result == 1) {//gs用户已购买该课程，可以播放
                    /*  layer.open({
                        type: 2,
                        title: '视频播放',
                        fix: false,
                        shade: 0.05,//调节背景明暗度
                        offset: "35%",//调节上下浮动位置
                        maxmin: true,
                        area: ['800px', '400px'],
                        content: "/lession/getVideo?lessionId=" + obj,
                        end: function () {

                        });
                        layer.full(index);*/
                    location.href = "/lession/getVideo?lessionId=" + obj + "&courseId=" + [[${course.courseId}]]
                } else {//gs购买提示框
                    layer.confirm("您尚未购买该课程，点击确认购买？",
                        {icon: 4, title: '温馨提示', shade: 0.05, offset: "35%"},
                        //第一个选项对应内容
                        function (index) {
                            flag = true;
                            //调用订单页面，支付跳转
                            payWindow(flag);
                            layer.close(index);
                        },
                        //第二个选项对应内容
                        function () {
                            flag = false;
                        }
                    )
                }
            }
        });

    };
    //弹出框，弹出订单详情页
    function payWindow(obj){
        if(obj==true){
            layer.open({
                type: 2,
                title: '订单详情',
                fix: false,
                maxmin: true,
                shade: 0.05,//调节背景明暗度
                offset: "35%",//调节上下浮动位置
                area: ['400px', '300px'],
                content: "/order/createOrder?courseId="+courseId+"&coursePrice="+coursrPrice,
                btn:['确定支付','我再想想'],
                yes: function (index,layero) {
                    //gs,获取layer所在页面的元素的属性值
                    var orderId=$(layero).find('iframe')[0].contentWindow.orderId.value;
                    location.href="/order/goPay?orderId="+orderId;//gs，跳转至支付页面
                }
            })
        }
    }




    /*点击课程评论*/
    var toComment = function (curr) {
        $("form").css({
            "display": "block"
        });
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/comment/getCommentByCid",
            data: {
                courseId: courseId,
                pageSize: 5,
                pageNum: curr||1
            },
            success: function (data) {
                console.log(data.page.list)
                $("#catalo").find("div").remove();
                $.each(data.page.list, function (index, comment) {
                    var evaluate;
                    if (comment.commentStatus == 0) {
                        evaluate = "好评"
                    }
                    if (comment.commentStatus == 1) {
                        evaluate = "差评"
                    }
                    var $commentContent = "<div>" +
                        "<span><strong>" + comment.user.userName + "</strong>在" + comment.commentTime + "发表</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + evaluate + "<br>" +
                        "<span>" + comment.commentContent + "</span><br><hr>" +
                        "</div>"
                    $("#catalo").append($commentContent);
                })
                laypage({
                    cont: 'pagenav',
                    skin: '#4169E1',
                    pages: data.totalPage,
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            toComment(obj.curr)
                        }
                    }
                })
            }
        })
    }

    var queryMulu = function () {
        location.replace(location.href)
    }

    /*添加评价*/
    function addComm() {
        //gs判断该用户的订单表中是否存在该课程
        $.ajax({
            type: "POST",
            url:'/order/check',//请求页面
            data: {
                courseId: courseId,
            },
            dataType: "json",
            success: function (result) {
                if (result.result == 1) {//gs用户已购买该课程，可以发表评论
                    var data = $("form").serialize(); // 表单序列化
                    $.ajax({//异步增加评论
                        url:"/comment/addComment",
                        type:"post",
                        dataType:"json",
                        data:data,
                        success:function (data) {
                            toComment()
                        }
                    })
                } else {
                    //设置将评论文本框为空
                    $("#commentMsg").val("");
                    layer.open({
                        type: 1,
                        title: '温馨提示',
                        fix: false,
                        maxmin: true,
                        shade: 0.05,//调节背景明暗度
                        offset: "35%",//调节上下浮动位置
                        content: "<div style='padding: 25px 40px 15px 40px '>您尚未学习该课程，暂不能评论哦！</div>",
                        btn:['退出评论'],
                    })
                }
            }

        });

    }


    /*全部课程的隐藏与显示*/
    function xianshi() {
        $("#courseList").css({
            "display": "block"
        })
    }
    function yincang() {
        $("#courseList").css({
            "display": "none"
        })
    }

    /*跳转到其他课程*/
    function toCourse(obj) {
      location.href="/course/toCourseMsg?courseId="+obj;
    }

    //收藏
    $("#btn_collect").click(function(){
        var classname = $("#btn_collect_icon").attr("class");
        $("#btn_collect_icon").removeClass("glyphicon-star-empty glyphicon-star");
        if(classname == "glyphicon glyphicon-star-empty" ){
            $("#btn_collect_icon").addClass("glyphicon glyphicon-star");
            alert("收藏成功");
        }else{
            $("#btn_collect_icon").addClass("glyphicon glyphicon-star-empty");
            alert("取消收藏");
        }
    });
    // $(document).ready(function () {
    //     //查询现状
    //     pdUserCollection(likeId, userId, courseId);
    //     //注册点击事件
    //     $("#mir").click(function () {
    //         if (userID != -1) {
    //             addLike(likeId, userId, courseId);
    //         } else {
    //             $(location).attr('href', '/webuser/login');
    //         }
    //     });
    // });
    // function addLike(likeId, userId, courseId) {
    //     $.ajax({
    //         type: "POST",
    //         url: "/like/addLike",
    //         data: { "likeId": likeId, "userId": userId, "courseId": courseId},
    //         dataType: "json",
    //         success: function (data) {
    //             if (data.code) {
    //                 $("#sctxt").text('取消收藏');
    //             } else {
    //                 $("#sctxt").text('收藏');
    //             }
    //         }
    //     })
    // }


</script>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 clearfix footer-col">
                <!--<img src="static/picture/logo_03.png">-->
                <div class="footer-slogan">轻松学编程</div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">公司</div>
                <a href="javascript:;" target="_blank">关于我们</a><br>
                <a href="javascript:;" target="_blank">联系我们</a><br>
                <a href="#" target="_blank">加入我们</a><br>
                <a href="#" target="_blank">技术博客</a><br>
            </div>
        </div>
    </div>
</div>

</body>
</html>